// 定义接口
interface All {
  isCate: number,
  id: number,
  title: string,
  content: string,
  [propName: string]: any
}

// 定义接口  接口是什么？ 其实接口就是用来规范定义对象类型的 可以简单的将其理解为一个 String 只不过这个规则String是我们自己来定义的
interface IClass {
  MenuList:any // 表示任意类型  一个any走遍TypeScript  其实我们是不到万不得已不推荐使用的
  isCate:number
  id:number
  title:string
  content:string
  Read():object // 表示return一个对象
  Add(objCan:any):void // void 表示无返回值类型  函数后添加 :类型  表示return 的类型
  Edit(objCan:any):void
  Del(objCan:any):void
  smallTianCai?:string // 可以定义也可一部定义
  [propName: string]: any //接口任意属性
}

class CurdMethods implements IClass {
  // 所有文章列表
  MenuList!: any // !: 表示这个对象我们在初始时可以不给他赋值  只是单纯的声明，如果不加 ! 的话ts会给我们报错
  // 类别分类
  isCate !: number
  // id
  id!: number
  // 标题
  title !: string
  // 内容
  content !: string
  constructor(isCate: number = 0, id: number = -1, title: string = '', content: string = '') {
    this.id = id
    this.isCate = isCate
    this.title = title
    this.content = content
    // 实例化的时候就去执行获取数据
    this.MenuList = this.Read()
  }
  // 查询方法
  Read(): object {
    // 从localStorge中获取数据 :string | null 代表的意思是 这个Menu的值可以是字符串也可以是null  因为获取的数据可能是字符串也可能没有就是null
    let strData: string | null = localStorage.getItem('Menu')
    // 声明一个变量  指定类型在这里我们给其定义为一个any类型  值为 [ ]
    let Menu: any = []
    // 如果strData不是 null的话 就说明有数据  有数据我们就给null赋值
    if (strData != null) {
      // JSON.parse 转译为数组对象
      Menu = JSON.parse(strData)
    }
    // 将这个数组对象赋值给 this.MenuList
    this.MenuList = Menu
    // 我们将这个查出的数据  同样return 出去  以方便别的类方法中调用
    return Menu
  }
  // 增加方法
  Add(objCan:any): void {
    // 获取this.menuList的数据，将数据插入重新插入到localstorage中
    const obj: All = {
      id: new Date().getTime(),
      isCate: Number(objCan.isCate),
      title: objCan.title,
      content: objCan.content
    }
    // push
    this.MenuList.push(obj)
    // 存入localstorage
    localStorage.setItem('Menu', JSON.stringify(this.MenuList))
    // 因为怎么说呢，vue2对push方法的监听是不能及时监听到的，实现不了响应式，所以我们在这里需要重新调用一边this.Read方法对this.MenuList进行重新赋值
    this.Read()
  }
  // 修改方法
  Edit(objCan:any): void {
    // 存入localstorage
    let obj: any = this.MenuList.filter((item: any) => {
      return item.id === objCan.id
    })[0]

    obj.isCate = Number(objCan.isCate)
    obj.title = objCan.title
    obj.content = objCan.content
    // 栈堆指向问题，指向的都是同一个地址，直接使用this.menuList即可
    localStorage.setItem('Menu', JSON.stringify(this.MenuList))
    this.Read()
  }
  // 删除方法
  Del(objCan: any): void {
    let i:number = this.MenuList.indexOf(objCan)
    this.MenuList.splice(i,1)
    localStorage.setItem('Menu', JSON.stringify(this.MenuList))
    this.Read()
  }

}
export default CurdMethods